---
type: tutorial
unitTitle: Создавайте и оформляйте с помощью компонентов Astro UI
title: 'Чек-ин: Модуль 3 - Компоненты'
description: |-
  Учебное пособие: Создайте свой первый блог на Astro —
  Создание компонентов Astro для повторного использования кода для общих элементов на вашем сайте
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
 
Теперь, когда файлы `.astro` и `.md` генерируют целые страницы на вашем сайте, пришло время создавать и повторно использовать небольшие фрагменты HTML с помощью компонентов Astro!

## Забегая вперед

В этом модуле вы узнаете, как создавать **компоненты Astro** для повторного использования кода для общих элементов на вашем сайте.  

Вы создадите:
- Навигационный компонент, который представляет меню ссылок на ваши страницы 
- Компонент подвала, который будет включен в нижнюю часть каждой страницы
- Компонент социальных сетей, используемый в подвале и содержащий ссылки на страницы профилей
- Интерактивный компонент гамбургера для переключения навигации на мобильных устройствах

Попутно вы будете использовать CSS и JavaScript для создания отзывчивого дизайна, реагирующего на размеры экрана и действия пользователя.

<Box icon="check-list">
## Чек-лист

<Checklist>
- [ ] Я готов создать несколько компонентов Astro!
</Checklist>
</Box>